import esriConfig from "@arcgis/core/config";
esriConfig.apiKey =
  "AAPK87578aff6cde443d83a7e2b75892319eKxGmCpEXmIQ99inC-cJVnQnTT14Tr5y0j-OnoiYzL3HUYIXWkTP_wuNnHDJYQZPv";
import Map from "@arcgis/core/Map";
import SceneView from "@arcgis/core/views/SceneView";
import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
import Legend from "@arcgis/core/widgets/Legend";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import "./style.css";
import $ from "jquery";
import { webtilelayers } from "./comm.js";

/*****************************************************************
 * In this case we set two visual variables on the renderer. Since
 * we're defining both size and color based on data values, there's
 * no need to specify defaults in the `symbol` property of the
 * renderer. In 3D it is easier to visually perceive size differences
 * when they are combined with color. Therefore we set up both a
 * size and a color visual variable based on the values of the same
 * field.
 *
 * Notice that the data value ramps for each is slightly different.
 * Color allows us to see the spatial trend in a tight range, whereas
 * size can be used to observe nuances between features of the same
 * color.
 *****************************************************************/

let shi = await $.getJSON("shi_3701.json");

let mask = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
            [-180, 90],
            [180, 90],
            [180, -90],
            [-180, -90],
          ],
          shi.features[0].geometry.coordinates[0].flat(1),
        ],
      },
    },
  ],
};

const maskblob = new Blob([JSON.stringify(mask)], {
  type: "application/json",
});

let geo = await $.getJSON("xian_3701_org.geojson");
// 随机生成颜色
function randomColor() {
  return (
    "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6)
  );
}
geo.features.forEach((area, idx) => {
  area.properties.population = parseInt(Math.random(idx) * 100);
  // area.properties.color = randomColor();
});
console.log(geo);
const renderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "polygon-3d", // autocasts as new PolygonSymbol3D()
    symbolLayers: [
      {
        type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
        size: 3000,
      },
    ],
  },
  visualVariables: [
    {
      type: "color",
      field: "population",
      legendOptions: {
        title: "% population with income below poverty level",
      },
      stops: [
        // const colors = ["rgba(230, 81, 84, 1)", "rgba(38, 182, 255, 1)", "rgba(103, 230, 209, 1)", "rgba(205, 118, 214, 1)", "rgba(255, 202, 140, 1)", "rgba(255, 242, 179, 1)", "rgba(255, 140, 217, 1)", "rgba(217, 157, 91, 1)", "rgba(200, 242, 169, 1)", "rgba(212, 184, 255, 1)"];
        { value: 20, color: "rgba(230, 81, 84, 0.3)" },
        { value: 35, color: "rgba(38, 182, 255, 0.3)" },
        { value: 50, color: "rgba(103, 230, 209, 0.3)" },
        { value: 65, color: "rgba(205, 118, 214, 0.3)" },
        { value: 80, color: "rgba(255, 202, 140, 0.3)" },
        // { value: 20, color: "#2b83ba22" },
        // { value: 35, color: "#abdda422" },
        // { value: 50, color: "#ffffbf22" },
        // { value: 65, color: "#fdae6122" },
        // { value: 80, color: "#d7191c22" }
      ],
    },
    // {
    //   type: "size",
    //   field: "POP_POVERTY",
    //   stops: [
    //     {
    //       value: 1000,
    //       size: 10000,
    //       label: "1,000"
    //     },
    //     {
    //       value: 150000,
    //       size: 300000,
    //       label: ">150,000"
    //     }
    //   ]
    // }
  ],
};
const blob = new Blob([JSON.stringify(geo)], {
  type: "application/json",
});
const povLayer = new GeoJSONLayer({
  url: URL.createObjectURL(blob),
  renderer: renderer,
  title: "Population living in poverty by county",
  outFields: ["*"],
  // popupTemplate: {
  //   // autocasts as new PopupTemplate()
  //   title: "{COUNTY}, {STATE}",
  //   content:
  //     "{POP_POVERTY} of {TOTPOP_CY} people live below the poverty line.",
  //   fieldInfos: [
  //     {
  //       fieldName: "POP_POVERTY",
  //       format: {
  //         digitSeparator: true,
  //         places: 0
  //       }
  //     },
  //     {
  //       fieldName: "TOTPOP_CY",
  //       format: {
  //         digitSeparator: true,
  //         places: 0
  //       }
  //     }
  //   ]
  // },
});
const masklayer = new GeoJSONLayer({
  url: URL.createObjectURL(maskblob),
  renderer: {
    type: "simple", // autocasts as new SimpleRenderer()
    symbol: {
      type: "simple-fill",
      color: "rgba(0,0,0,1)",
    },
  },
});

const map = new Map({
  basemap: "osm-light-gray",
  // basemap: {
  //   baseLayers: [
  //     new WebTileLayer(webtilelayers[1]),
  //     new WebTileLayer(webtilelayers[2])
  //   ],
  // },
  layers: [povLayer, masklayer],
});

const view = new SceneView({
  container: "viewDiv",
  map: map,
  camera: {
    position: {
      latitude: 36.667922, // 18.24237,
      longitude: 117.005343, //-88.72943,
      z: 634560,
    },
    tilt: 45,
    heading: 10,
  },
});
// setTimeout(()=>{
// view.goTo({
// center: [117.005343,36.667922],
// scale:600000
// })
// },2000)

const legend = new Legend({
  view: view,
});

view.ui.add(legend, "bottom-right");
